<template>
	<view class="home-credit-mall">
		<!-- 返回按钮 -->
		<u-back-top :scroll-top="scrollTop" top="10" :duration="240" :iconStyle="iconStyle" :customStyle="custom">
		</u-back-top>
		<view class="advertising">
			<view class="swiper">
				<u-swiper :list="list" autoplay indicator indicatorMode="dot" :interval="4000" circular radius="10"
					indicatorActiveColor="#1D378B" height="50vw"></u-swiper>
			</view>
		</view>
		<u-gap height="8" bgColor="#eaeaea" marginTop="8"></u-gap>
		<view class="goods-content">
			<block v-for="(res, index) in itemList" :key="index">
				<view class="action-item">
					<view class="item-style">
						<view class="item-img-style">
							<image class="item-img" :src="res.img" mode="widthFix"></image>
						</view>
						<view class="item-info">
							<view class="item-name">{{ res.title }}</view>
							<view class="item-status">
								<view class="left">
									<image class="image" src="/static/images/common/voucher.png"></image>
									<view class="price">{{res.price}}</view>
								</view>
								<view class="right">
									<view class="number">赠 {{ res.present }} 广告分</view>
									<view class="right-button" @click="addOrder(res, res.id)">提货</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<template v-if="hasNoData">
			<view class="action-sell-out">
				<image class="sell-out" src="/static/images/common/sellout.png" mode="widthFix"></image>
				<view class="sell-out-text">商品暂未上架</view>
			</view>
		</template>
		<!-- 弹窗 -->
		<view class="mask" v-if="showTips" @touchmove.stop.prevent>
			<u-transition :show="showTips">
				<view class="modal-bg-box">
					<view class="title">提示</view>
					<view class="inner-box">
						<view class="text-tips" :selectable="false">{{ maskTips }}</view>
						<view class="button-box">
							<view class="button-one" @click.stop="cancel">{{ cancel_button }}</view>
							<view class="button-two" @click.stop="confirm">{{ confirm_button }}</view>
						</view>
					</view>
				</view>
			</u-transition>
		</view>
		<!-- 购买商品弹出层 -->
		<u-popup :show="show" :round="10" :closeable="true" @close="close">
			<view class="auto-background">
				<view class="auto-title">购买商品</view>
				<view class="goods-content">
					<view class="content">
						<image class="detail-img" :src="goods.img" mode="widthFix"></image>
						<view class="detail-content">
							<view class="title">{{ goods.title }}</view>
							<view class="price-number">
								<view class="price-image">
									<!-- <image class="image-style" src="/static/images/common/voucher.png"></image> -->
									<view class="price">消耗 {{ goods.price }} 张提货券</view>
								</view>
								<view class="number">赠送 {{ goods.present }} 广告分</view>
							</view>
						</view>
					</view>
				</view>
				<view class="add-content-input-two">
					<view class="input-title">购买数量: </view>
					<view class="input-content">
						<input class="input-style-two" type="number" placeholder-class="input-placeholder"
							placeholder="请输入购买数量" v-model="number" :focus="numberFocus" @blur="numberLostFocus"></input>
					</view>
					<!-- <view class="input-title">张</view> -->
				</view>
				<view class="tips-content">
					<view class="tips">提示:</view>
					<view class="tips">为保证您能成功下单，确认支付前请先设置您的收货地址。</view>
				</view>
				<view class="confirm-button" @click="confirmPick">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		banner,
		goodsSpecial,
		createOrder
	} from '@/common/api.js';
	export default {
		data() {
			return {
				/* 返回顶部按钮 */
				scrollTop: 0, // 返回顶部滚动值
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: '600',
					color: '#FFFFFF'
				}, // 滚动内层样式
				custom: {
					background: '#CB8F58'
				}, // 滚动外层样式

				/* 加载更多 */
				loading: {
					status: 'nomore', // 加载更多设置
					loadingText: '加载中',
					loadmoreText: '轻轻上拉加载更多',
					nomoreText: '暂时没有了',
				}, // 加载设置

				/* 轮播图 */
				list: [], // 轮播图

				/* 数据列表 */
				pages: 1, // 订单页数
				total_page: '', // 订单总页数
				amount: 5, // 订单条数
				total_amount: '', // 订单总数
				activityID: 13, // 活动场次编号
				date: '', // 活动时间
				number_two: '666', // 商品销量
				itemList: [], // 商品信息

				/* 弹窗 */
				maskTips: '', // 弹窗提示
				showTips: false, // 弹窗状态
				cancel_button: '取消', // 弹窗取消按钮 
				confirm_button: '确定', // 弹窗确定按钮 
				confirm_status: 0, // 0 - 确定下单， 1 - 跳转支付页面

				/* 弹出购买窗口 */
				show: false, // 是否显示弹窗
				goods: {}, // 商品
				goodsID: '', // 下单商品编号
				number: '', // 数量
				numberFocus: false, // 数量状态
				
				/* 是否有数据 */
				hasNoData: false, // 判断当前是否有数据
			};
		},
		onLoad() {
			this.getBanner(); // 获取轮播图内容
		},
		onShow() {
			/* 活动详情列表 */
			this.getGoodsList(); // 获取商品信息
			this.confirm_button = '确定';
			this.cancel_button = '取消';
			this.confirm_status = 0;
		},
		/* 返回顶部 */
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {

			/* 获取轮播图内容 */
			getBanner() {
				const that = this;
				banner().then((res) => {
					const result = res.data;
					for (let i = 0; i < result.length; i++) {
						that.list.push(result[i].url);
					};
				});
			},

			/* 获取商品列表 */
			getGoodsList() {
				const that = this;
				const params = {
					gtype: 3
				};
				goodsSpecial(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						that.itemList = result.map(item => {
							return {
								id: item.id,
								number: item.goodsNum,
								title: item.goodsName,
								img: item.goodsLogo,
								price: Fn.checkDigit({
									number: item.goodsPrice,
									len: 2,
									max: 100000000,
									min: -1
								}) /* item.goodsPrice */ ,
								status: item.onlineStatus,
								present: parseInt(item.special_give)
							};
						});
						if (that.itemList.length === 0) {
							that.hasNoData = true;
						} else {
							that.hasNoData = false;
						};
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 商品下单 */
			addOrder(good, id) {
				const that = this;
				that.show = true;
				that.goodsID = id;
				that.goods = good;
				// that.showTips = true;
				// that.maskTips = '下单将获得' +  present + '广告分';
				// that.goodsID = id;
			},

			/* 确认 */
			confirm() {
				const that = this;
				that.showTips = false;
				that.maskTips = '商品下单成功';
				if (that.confirm_status === 0) {
					const params = {
						id: that.goodsID,
						num: that.number
					};
					Fn.Loading('购买中');
					setTimeout(() => {
						Fn.LoadingOff();
						// that.showTips = true;
						that.confirm_button = '前去查看';
						that.cancel_button = '留在此页';
						// 节流操作防止重复请求
						uni.$u.throttle(() => {
							createOrder(params).then((res) => {
								if (res.status === 1) {
									that.showTips = true;
									that.confirm_status = 1;
									that.number = '';
								} else {
									Fn.Toast(res.msg, 3, 1500);
									that.confirm_button = '确定';
									that.cancel_button = '取消';
								};
							});
						}, 1500);
					}, 500);
				} else {
					uni.navigateTo({
						url: '/pages/mine/buyOrder/buyOrder?id=' + 1,
					});
				};
			},

			/* 确定提货操作 */
			confirmPick() {
				const that = this;
				if (that.number === '') {
					Fn.Toast('购买数量不能为空', 3, 1500);
					that.numberFocus = true;
					return;
				};
				if (that.number <= 0) {
					Fn.Toast('购买数量不能少于0', 3, 1500);
					this.number = '';
					this.numberFocus = true;
				} else {
					that.show = false;
					that.showTips = true;
					that.maskTips = '是否购买' + that.number + '个提货商品';
				};
			},

			/* 取消 */
			cancel() {
				this.showTips = false;
				this.confirm_button = '确定';
				this.cancel_button = '取消';
				this.confirm_status = 0;
				this.number = '';
			},

			/* 关闭弹出窗口 */
			close() {
				this.show = false
			},

			/* 数量失去焦点时 */
			numberLostFocus(event) {
				this.numberFocus = false;
			},
		}
	}
</script>

<style lang="scss">
	.home-credit-mall {

		.mask {
			position: fixed;
			z-index: 1001;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);

			.modal-bg-box {
				background-color: #FFFFFF;
				width: 580rpx;
				// height: 390rpx;
				position: absolute;
				left: 50%;
				top: 45%;
				transform: translate(-50%, -50%);

				.title {
					text-align: center;
					margin: 40rpx 0;
					font-size: 42rpx;
					font-weight: 600;
				}

				.inner-box {
					margin: 20rpx 55rpx 40rpx 55rpx;
					text-align: center;

					.text-tips {
						display: block;
						line-height: 70rpx;
						font-size: 33rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: bold;
						color: #89898C;
						word-wrap: break-word;
					}

					.button-box {
						text-align: center;
						margin-top: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.button-one {
							display: inline-block;
							padding: 0 10px;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							margin: 0 40rpx 0 0;
							text-align: center;
							color: #000000;
							border: 2px solid #000000;
							border-radius: 8rpx;
							font-size: 26rpx;
							font-weight: bold;
							cursor: pointer;
						}

						.button-two {
							padding: 0 10px;
							background-color: #000000;
							display: inline-block;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							// margin: 0 0 0 40rpx;
							text-align: center;
							color: #FFFFFF;
							border-radius: 8rpx;
							font-size: 26rpx;
							font-weight: bold;
							cursor: pointer;
						}
					}
				}
			}
		}

		.advertising {
			background-color: #FFFFFF;
			padding: 10px 18px 15px 18px;

			.swiper {}

			.invite-img {
				margin-top: 40rpx;
				cursor: pointer;

				.img {
					width: 100%;
					// height: 30vw;
				}
			}

			.tips {
				background-image: linear-gradient(to right, #FCEBD9, #FAD1AE);
				margin: 40rpx 0 20rpx 0;
				padding: 12px 10px 12px 20px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 10px;
				color: #CB8F58;

				.left-content {
					display: flex;
					align-items: center;

					.left-image {
						width: 9vw;
						height: 48rpx;
					}

					.left-detail {
						margin-left: 13px;
						font-size: 3.8vw;
						font-weight: 600;
					}
				}

				.right-content {
					display: flex;
					align-items: center;
					cursor: pointer;

					.right-image {
						width: 1.5vw;
						height: auto;
					}

					.right-detail {
						margin-right: 10px;
						font-size: 2.8vw;
					}
				}
			}
		}

		.goods-content {
			padding: 15px 18px 20px 18px;

			.goods-title {
				font-size: 36rpx;
				font-weight: 600;
			}

			.action-item {
				width: calc(50% - 30rpx);
				display: inline-block;
				border: 1px solid #E9E9E9;
				// margin: 15rpx;
				// padding: 18rpx;
				box-sizing: border-box;
				border-radius: 6px;

				&:nth-of-type(even) {
					margin-left: 30rpx;
				}

				&:nth-of-type(odd) {
					margin-right: 30rpx;
				}

				&:nth-of-type(n+3) {
					margin-top: 30rpx;
				}

				.item-style {
					// border-radius: 10px;

					.item-img-style {
						width: 100%;
						// width: 260rpx;
						height: 290rpx;

						.item-img {
							width: 100%;
							height: 100%;
							box-sizing: border-box;
							border-radius: 6px 6px 0 0;
						}
					}

					.item-info {
						margin-top: 26rpx;
						padding: 18rpx;

						.item-name {
							font-size: 36rpx;
						}

						.item-status {
							// display: flex;
							// align-items: center;
							// justify-content: space-between;
							margin-top: 10rpx;

							.left {
								// width: 23vw;
								display: flex;
								align-items: center;

								.image {
									width: 55rpx;
									height: 55rpx;
								}

								.price {
									margin-left: 20rpx;
									font-size: 30rpx;
									font-weight: 600;
									color: #E62A21;
								}

								// .status {
								// 	background-color: #AD4440;
								// 	padding: 8rpx 18rpx;
								// 	color: #FFFFFF;
								// 	font-size: 22rpx;
								// 	font-weight: 600;
								// }

								// .status-one {
								// 	background-color: #beb2b2;
								// 	padding: 8rpx 18rpx;
								// 	// color: #FFFFFF;
								// 	font-size: 22rpx;
								// 	font-weight: 600;
								// }
							}

							// .image {
							// 	cursor: pointer;
							// 	width: 6.5vw;
							// 	height: 6.5vw;
							// }

							.right {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.number {
									margin-top: 10rpx;
									color: #BBBABA;
									font-size: 24rpx;
								}

								.right-button {
									background-color: #E62A21;
									width: 75rpx;
									line-height: 45rpx;
									text-align: center;
									color: #FFFFFF;
									font-size: 24rpx;
									border-radius: 3px;
									cursor: pointer;
								}
							}
						}
					}
				}
			}
		}

		.auto-background {
			padding-bottom: 40rpx;

			.auto-title {
				margin: 40rpx 0;
				text-align: center;
				font-size: 34rpx;
				font-weight: 600;
			}

			.goods-content {
				background-color: #FFFFFF;
				margin-bottom: 40rpx;
				padding: 20rpx 30rpx;
				box-sizing: border-box;

				.content {
					// margin: 30rpx 0;
					display: flex;
					align-items: center;
					// justify-content: space-between;

					.detail-img {
						width: 30vw;
						height: 30vw;
					}

					.detail-content {
						width: 62%;
						height: 25vw;
						margin-left: 30rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.title {
							font-size: 36rpx;
							font-weight: 600;
						}

						.price-number {
							// margin-top: 30rpx;
							text-align: right;
							// display: flex;
							// align-items: center;
							// justify-content: space-between;

							// &:nth-of-type(n+2) {
							// 	margin-top: 10rpx;
							// }

							.price-image {
								// display: flex;
								// align-items: center;

								.image-style {
									width: 55rpx;
									height: 55rpx;
								}

								.price {
									margin-left: 20rpx;
									font-size: 30rpx;
									font-weight: 600;
								}
							}

							.number {
								margin-top: 20rpx;
								color: #E62A21;
								font-size: 26rpx;
								// font-weight: 600;
							}
						}
					}
				}
			}

			.add-content-input-two {
				padding: 20rpx 30rpx;
				display: flex;
				align-items: center;

				.input-placeholder {
					color: #a5a5a8;
					font-size: 27rpx;
					// font-weight: 600;
				}

				.input-title {
					font-size: 36rpx;
					font-weight: 600;
				}

				.input-content {
					margin-left: 30rpx;

					.input-style-two {
						color: #58585a;
						font-size: 30rpx;
					}
				}
			}

			.tips-content {
				margin: 40rpx 0;
				padding: 0 15px;
				color: #F64444;
				font-size: 26rpx;

				.tips {
					// margin-bottom: 10rpx;
					line-height: 42rpx;
				}
			}

			.confirm-button {
				background-color: #FCEBD9;
				margin: 40px 15px 0 15px;
				padding: 24rpx 0;
				text-align: center;
				font-size: 30rpx;
				border-radius: 5px;
				cursor: pointer;
			}
		}
		
		.action-sell-out {
			margin-top: 100rpx;
			text-align: center;
		
			.sell-out {
				width: 65vw;
				height: 50vw;
			}
		
			.sell-out-text {
				margin-top: 40rpx;
				color: #aaaaaa;
				font-size: 34rpx;
				font-weight: 600;
			}
		}
	}
</style>
